<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <script src="/static/js/jquery-1.12.4.min.js"></script>
    <script src="/static/js/qrcode.min.js"></script>
    <script src="/static/bootstrap/js/bootstrap.min.js"></script>
</head>
<style>
body, iframe {
    width: 100%; height: 100%;
}
.nav {
    background: #2C2C2C;
    border-top: #A30000 5px solid;
    padding: 10px 10px;
}
.navbar, ul, li, a {
    background: #2C2C2C;
    color: #8B949D;
    width: 100%;
    font-size: small;
}
a:link {color:#8B949D;}      /* 未访问链接*/
a:visited {color:#8B949D;}  /* 已访问链接 */
a:hover {color:#8B949D;}  /* 鼠标移动到链接上 */
a:active {color:#8B949D;}  /* 鼠标点击时 */
.page-title {
    color: #8B949D;
}
Var {
    color: #fefefe;
    font-size: small;
}
img {
    width: 94px; height: 61px;
}
</style>

<body>
    <div class="mainWindow container-fluid d-flex">
        <div class="nav d-flex flex-column">
            <a class="page-title navbar-brand" href="#">帮助文档</a>            
            <!-- <i class="fa fa-cc-mastercard" style="font-size:60px;color:#8B949D;"></i>             -->                       
            <nav class="navbar">        
                <ul class="navbar-nav">
                    {% for name, url in sess %}
                    <li class="nav-item">
                        <a class="doc-page-help nav-link" target="myframe" href="{{root}}/{{url}}">{{name}}</a>
                    </li>
                    {% endfor %}
                </ul>
            </nav>
            <div class="flex-xl-grow-1"></div>
            <img src="/static/images/UnionPay.png" alt="">
            <Var>Ver: {{Ver.Ver}}</Var>
        </div>
        <iframe id="myframe" name="myframe" src="{{root}}"></iframe>
    </div>

</body>
<script>
    function _ChangeHeight(){
        let aiH = $(window).height();
        $(".nav").outerHeight(aiH);
        $("#myframe").outerHeight(aiH);
    }
    $(document).on("ready", function () {
        _ChangeHeight();
    });        
</script>

</html>